<template>
  <div class="occupant">
    <div class="title">
      <div>入住人信息</div>
      <span>已选{{ occupantList.length }}人</span>
    </div>

    <div class="list">
      <div class="item" v-for="(item, index) in occupantList" :key="index">
        <div class="name">{{ item.name }}</div>
        <div class="phone">{{ desensitizePhone(item.phone) }}</div>
      </div>
      <div class="btn active" @click="selectAddress()">
        <wd-icon name="add-circle1" size="30rpx" color="#fff"></wd-icon>
        <span>添加/编辑</span>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { desensitizePhone } from '@/utils/index'
defineOptions({ name: 'Occupant' })

const emits = defineEmits(['occupant'])

const occupantList = ref([])
function selectAddress() {
  uni.navigateTo({
    url: '/pages-sub/hotel/occupant/list?select=true',
    events: {
      getBackData(data) {
        if (data.backData) {
          occupantList.value = [data.backData]
          emits('occupant', data.backData)
        }
      },
    },
  })
}
</script>
<style lang="scss" scoped>
.occupant {
  margin: 26rpx 30rpx 0;
  background-color: #fff;
  border-radius: 30rpx;
  .title {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 77rpx;
    margin: 0 20rpx;
    color: var(--color1);
    div {
      flex: 1;
      font-size: 30rpx;
      font-weight: 700;
    }
    span {
      font-size: 27rpx;
    }
  }

  .list {
    padding: 20rpx 20rpx 40rpx;
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      .name {
        font-size: 28rpx;
        font-weight: 600;
        color: var(--color1);
      }
      .phone {
        font-size: 24rpx;
        color: var(--color4);
      }
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 62rpx;
      padding: 0px 20rpx;
      font-size: 27rpx;
      color: #fff;
      background: var(--color1);
      border-radius: 14rpx;
      span {
        margin-left: 6rpx;
        line-height: 1;
      }
    }
  }
}
</style>
